<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>纯CSS Bootstrap单选框和复选框美化库</title>
	<link href="http://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
	<link rel="stylesheet" href="css/icheck-bootstrap.css">
	<style type="text/css">
		body { background-color:#f7f7f7; font-family:'Roboto'}
		.container { margin:150px auto;}
	</style>
</head>
<body>
	
		<div class="container">
		<h1>icheck-bootstrap 示例</h1>
		<div class="row">
		<div class="col-md-6">
		<div class="row">
		<div class="col-md-12">
		<h2>Twitter Bootstrap colors</h2>
		</div>
		<div class="col-md-6">
		<div class="checkbox icheck-primary">
		<input type="checkbox" checked id="primary" />
		<label for="primary">primary</label>
		</div>
		<div class="radio icheck-primary">
		<input type="radio" id="primary1" name="primary" />
		<label for="primary1">primary 1</label>
		</div>
		<div class="radio icheck-primary">
		<input type="radio" checked id="primary2" name="primary" />
		<label for="primary2">primary 2</label>
		</div>
		<br />
		<div class="checkbox icheck-default">
		<input type="checkbox" checked id="default" />
		<label for="default">default</label>
		</div>
		<div class="radio icheck-default">
		<input type="radio" id="default1" name="default" />
		<label for="default1">default 1</label>
		</div>
		<div class="radio icheck-default">
		<input type="radio" checked id="default2" name="default" />
		<label for="default2">default 2</label>
		</div>
		<br />
		<div class="checkbox icheck-success">
		<input type="checkbox" checked id="success" />
		<label for="success">success</label>
		</div>
		<div class="radio icheck-success">
		<input type="radio" id="success1" name="success" />
		<label for="success1">success 1</label>
		</div>
		<div class="radio icheck-success">
		<input type="radio" checked id="success2" name="success" />
		<label for="success2">success 2</label>
		</div>
		</div>
		<div class="col-md-6">
		<div class="checkbox icheck-info">
		<input type="checkbox" checked id="info" />
		<label for="info">info</label>
		</div>
		<div class="radio icheck-info">
		<input type="radio" id="info1" name="info" />
		<label for="info1">info 1</label>
		</div>
		<div class="radio icheck-info">
		<input type="radio" checked id="info2" name="info" />
		<label for="info2">info 2</label>
		</div>
		<br />
		<div class="checkbox icheck-warning">
		<input type="checkbox" checked id="warning" />
		<label for="warning">warning</label>
		</div>
		<div class="radio icheck-warning">
		<input type="radio" id="warning1" name="warning" />
		<label for="warning1">warning 1</label>
		</div>
		<div class="radio icheck-warning">
		<input type="radio" checked id="warning2" name="warning" />
		<label for="warning2">warning 2</label>
		</div>
		<br />
		<div class="checkbox icheck-danger">
		<input type="checkbox" checked id="danger" />
		<label for="danger">danger</label>
		</div>
		<div class="radio icheck-danger">
		<input type="radio" id="danger1" name="danger" />
		<label for="danger1">danger 1</label>
		</div>
		<div class="radio icheck-danger">
		<input type="radio" checked id="danger2" name="danger" />
		<label for="danger2">danger 2</label>
		</div>
		</div>
		</div>
		</div>
		<div class="col-md-6">
		<div class="row">
		<div class="col-md-12">
		<h2>Flat UI colors</h2>
		</div>
		<div class="col-md-6">
		<div class="checkbox icheck-turquoise">
		<input type="checkbox" checked id="turquoise" />
		<label for="turquoise">turquoise</label>
		</div>
		<div class="checkbox icheck-turquoise">
		<input type="checkbox" checked id="turquoise" />
		<label for="turquoise">turquoise</label>
		</div>
		<div class="radio icheck-turquoise">
		<input type="radio" id="turquoise1" name="turquoise" />
		<label for="turquoise1">turquoise 1</label>
		</div>
		<div class="radio icheck-turquoise">
		<input type="radio" checked id="turquoise2" name="turquoise" />
		<label for="turquoise2">turquoise 2</label>
		</div>
		<br />
		<div class="checkbox icheck-emerland">
		<input type="checkbox" checked id="emerland" />
		<label for="emerland">emerland</label>
		</div>
		<div class="radio icheck-emerland">
		<input type="radio" id="emerland1" name="emerland" />
		<label for="emerland1">emerland 1</label>
		</div>
		<div class="radio icheck-emerland">
		<input type="radio" checked id="emerland2" name="emerland" />
		<label for="emerland2">emerland 2</label>
		</div>
		<br />
		<div class="checkbox icheck-peterriver">
		<input type="checkbox" checked id="peterriver" />
		<label for="peterriver">peterriver</label>
		</div>
		<div class="radio icheck-peterriver">
		<input type="radio" id="peterriver1" name="peterriver" />
		<label for="peterriver1">peterriver 1</label>
		</div>
		<div class="radio icheck-peterriver">
		<input type="radio" checked id="peterriver2" name="peterriver" />
		<label for="peterriver2">peterriver 2</label>
		</div>
		<br />
		<div class="checkbox icheck-amethyst">
		<input type="checkbox" checked id="amethyst" />
		<label for="amethyst">amethyst</label>
		</div>
		<div class="radio icheck-amethyst">
		<input type="radio" id="amethyst1" name="amethyst" />
		<label for="amethyst1">amethyst 1</label>
		</div>
		<div class="radio icheck-amethyst">
		<input type="radio" checked id="amethyst2" name="amethyst" />
		<label for="amethyst2">amethyst 2</label>
		</div>
		<br />
		<div class="checkbox icheck-wetasphalt">
		<input type="checkbox" checked id="wetasphalt" />
		<label for="wetasphalt">wetasphalt</label>
		</div>
		<div class="radio icheck-wetasphalt">
		<input type="radio" id="wetasphalt1" name="wetasphalt" />
		<label for="wetasphalt1">wetasphalt 1</label>
		</div>
		<div class="radio icheck-wetasphalt">
		<input type="radio" checked id="wetasphalt2" name="wetasphalt" />
		<label for="wetasphalt2">wetasphalt 2</label>
		</div>
		<br />
		<div class="checkbox icheck-greensea">
		<input type="checkbox" checked id="greensea" />
		<label for="greensea">greensea</label>
		</div>
		<div class="radio icheck-greensea">
		<input type="radio" id="greensea1" name="greensea" />
		<label for="greensea1">greensea 1</label>
		</div>
		<div class="radio icheck-greensea">
		<input type="radio" checked id="greensea2" name="greensea" />
		<label for="greensea2">greensea 2</label>
		</div>
		<br />
		<div class="checkbox icheck-nephritis">
		<input type="checkbox" checked id="nephritis" />
		<label for="nephritis">nephritis</label>
		</div>
		<div class="radio icheck-nephritis">
		<input type="radio" id="nephritis1" name="nephritis" />
		<label for="nephritis1">nephritis 1</label>
		</div>
		<div class="radio icheck-nephritis">
		<input type="radio" checked id="nephritis2" name="nephritis" />
		<label for="nephritis2">nephritis 2</label>
		</div>
		<br />
		<div class="checkbox icheck-belizehole">
		<input type="checkbox" checked id="belizehole" />
		<label for="belizehole">belizehole</label>
		</div>
		<div class="radio icheck-belizehole">
		<input type="radio" id="belizehole1" name="belizehole" />
		<label for="belizehole1">belizehole 1</label>
		</div>
		<div class="radio icheck-belizehole">
		<input type="radio" checked id="belizehole2" name="belizehole" />
		<label for="belizehole2">belizehole 2</label>
		</div>
		<br />
		<div class="checkbox icheck-wisteria">
		<input type="checkbox" checked id="wisteria" />
		<label for="wisteria">wisteria</label>
		</div>
		<div class="radio icheck-wisteria">
		<input type="radio" id="wisteria1" name="wisteria" />
		<label for="wisteria1">wisteria 1</label>
		</div>
		<div class="radio icheck-wisteria">
		<input type="radio" checked id="wisteria2" name="wisteria" />
		<label for="wisteria2">wisteria 2</label>
		</div>
		<br />
		<div class="checkbox icheck-midnightblue">
		<input type="checkbox" checked id="midnightblue" />
		<label for="midnightblue">midnightblue</label>
		</div>
		<div class="radio icheck-midnightblue">
		<input type="radio" id="midnightblue1" name="midnightblue" />
		<label for="midnightblue1">midnightblue 1</label>
		</div>
		<div class="radio icheck-midnightblue">
		<input type="radio" checked id="midnightblue2" name="midnightblue" />
		<label for="midnightblue2">midnightblue 2</label>
		</div>
		</div>
		<div class="col-md-6">
		<div class="checkbox icheck-sunflower">
		<input type="checkbox" checked id="sunflower" />
		<label for="sunflower">sunflower</label>
		</div>
		<div class="radio icheck-sunflower">
		<input type="radio" id="sunflower1" name="sunflower" />
		<label for="sunflower1">sunflower 1</label>
		</div>
		<div class="radio icheck-sunflower">
		<input type="radio" checked id="sunflower2" name="sunflower" />
		<label for="sunflower2">sunflower 2</label>
		</div>
		<br />
		<div class="checkbox icheck-carrot">
		<input type="checkbox" checked id="carrot" />
		<label for="carrot">carrot</label>
		</div>
		<div class="radio icheck-carrot">
		<input type="radio" id="carrot1" name="carrot" />
		<label for="carrot1">carrot 1</label>
		</div>
		<div class="radio icheck-carrot">
		<input type="radio" checked id="carrot2" name="carrot" />
		<label for="carrot2">carrot 2</label>
		</div>
		<br />
		<div class="checkbox icheck-alizarin">
		<input type="checkbox" checked id="alizarin" />
		<label for="alizarin">alizarin</label>
		</div>
		<div class="radio icheck-alizarin">
		<input type="radio" id="alizarin1" name="alizarin" />
		<label for="alizarin1">alizarin 1</label>
		</div>
		<div class="radio icheck-alizarin">
		<input type="radio" checked id="alizarin2" name="alizarin" />
		<label for="alizarin2">alizarin 2</label>
		</div>
		<br />
		<div class="checkbox icheck-clouds">
		<input type="checkbox" checked id="clouds" />
		<label for="clouds">clouds</label>
		</div>
		<div class="radio icheck-clouds">
		<input type="radio" id="clouds1" name="clouds" />
		<label for="clouds1">clouds 1</label>
		</div>
		<div class="radio icheck-clouds">
		<input type="radio" checked id="clouds2" name="clouds" />
		<label for="clouds2">clouds 2</label>
		</div>
		<br />
		<div class="checkbox icheck-concrete">
		<input type="checkbox" checked id="concrete" />
		<label for="concrete">concrete</label>
		</div>
		<div class="radio icheck-concrete">
		<input type="radio" id="concrete1" name="concrete" />
		<label for="concrete1">concrete 1</label>
		</div>
		<div class="radio icheck-concrete">
		<input type="radio" checked id="concrete2" name="concrete" />
		<label for="concrete2">concrete 2</label>
		</div>
		<br />
		<div class="checkbox icheck-orange">
		<input type="checkbox" checked id="orange" />
		<label for="orange">orange</label>
		</div>
		<div class="radio icheck-orange">
		<input type="radio" id="orange1" name="orange" />
		<label for="orange1">orange 1</label>
		</div>
		<div class="radio icheck-orange">
		<input type="radio" checked id="orange2" name="orange" />
		<label for="orange2">orange 2</label>
		</div>
		<br />
		<div class="checkbox icheck-pumpkin">
		<input type="checkbox" checked id="pumpkin" />
		<label for="pumpkin">pumpkin</label>
		</div>
		<div class="radio icheck-pumpkin">
		<input type="radio" id="pumpkin1" name="pumpkin" />
		<label for="pumpkin1">pumpkin 1</label>
		</div>
		<div class="radio icheck-pumpkin">
		<input type="radio" checked id="pumpkin2" name="pumpkin" />
		<label for="pumpkin2">pumpkin 2</label>
		</div>
		<br />
		 <div class="checkbox icheck-pomegranate">
		<input type="checkbox" checked id="pomegranate" />
		<label for="pomegranate">pomegranate</label>
		</div>
		<div class="radio icheck-pomegranate">
		<input type="radio" id="pomegranate1" name="pomegranate" />
		<label for="pomegranate1">pomegranate 1</label>
		</div>
		<div class="radio icheck-pomegranate">
		<input type="radio" checked id="pomegranate2" name="pomegranate" />
		<label for="pomegranate2">pomegranate 2</label>
		</div>
		<br />
		<div class="checkbox icheck-silver">
		<input type="checkbox" checked id="silver" />
		<label for="silver">silver</label>
		</div>
		<div class="radio icheck-silver">
		<input type="radio" id="silver1" name="silver" />
		<label for="silver1">silver 1</label>
		</div>
		<div class="radio icheck-silver">
		<input type="radio" checked id="silver2" name="silver" />
		<label for="silver2">silver 2</label>
		</div>
		<br />
		<div class="checkbox icheck-asbestos">
		<input type="checkbox" checked id="asbestos" />
		<label for="asbestos">asbestos</label>
		</div>
		<div class="radio icheck-asbestos">
		<input type="radio" id="asbestos1" name="asbestos" />
		<label for="asbestos1">asbestos 1</label>
		</div>
		<div class="radio icheck-asbestos">
		<input type="radio" checked id="asbestos2" name="asbestos" />
		<label for="asbestos2">asbestos 2</label>
		</div>
		</div>
		</div>
		</div>
		</div>
		</div>
		 
</body>
</html>